<template>
    <div>
        <topAdv :is-show="true" :class="['margin']"></topAdv>
        <div style="background: #f4f4f4; overflow: hidden">
            <div class="main-box">
                <div>
                    <el-tabs :tab-position="tabPosition" >
                        <el-tab-pane label="我的主页">
                            <div class="my-home-page">
                                <div class="con-main-right " >
                                    <h2>个人信息</h2>
                                    <div class="con-main-right-con">
                                        <div class="con-main-right-name">
                                            <span>昵称</span>&nbsp;
                                            <b @click="dialogVisible = true">修改</b>
                                            <p class="text-name">{{$store.state.userInfo.nickname}}</p>
                                        </div>
                                        <div class="con-main-right-name">
                                            <span>手机号</span>&nbsp;
                                            <b @click="dialogVisiblea=true">修改</b>
                                            <p class="text-phone">{{$store.state.userInfo.mobile}}</p>
                                        </div>
                                        <div class="con-main-right-name">
                                            <span>密码</span>&nbsp;
                                            <b @click="dialogVisibleb=true">修改</b>
                                            <p class="text-pwd">*********</p>
                                        </div>
                                        <div class="con-main-right-img">
                                            <img :src="$store.state.userInfo.avatarUrl" alt="">
                                            <br>
<!--                                            <span>-->
<!--                                                <span class="iconfont icon-shangchuan"></span>更改头像</span>-->
                                            <input type="file" @change="commitFile" ref="avatar" class="file">
                                            <div class="require">修改头像</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="我的课程">配置管理</el-tab-pane>
                        <el-tab-pane label="我的订单">角色管理</el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
        <footerlist></footerlist>


        <el-dialog
                title="修改昵称"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <div class="name-1"><input type="text" placeholder="请输入新昵称！" v-model="newUserName"></div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="changeName">确 定</el-button>
  </span>
        </el-dialog>
        <el-dialog
                title="修改手机号"
                :visible.sync="dialogVisiblea"
                width="30%"
                :before-close="handleClose">
            <div class="name-1"><input type="text" placeholder="请输入手机号！" v-model="newPhoneNum"></div>
            <div class="name-1" style="margin-top: 20px"><input type="text" placeholder="请输入验证码！" v-model="newCode"></div>
            <br>
            <div><button class="code-1" @click="getCodeU" v-bind:disabled="isClickA">{{textA}}</button></div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisiblea = false">取 消</el-button>
    <el-button type="primary" @click="changePhone">确 定</el-button>
  </span>
        </el-dialog>
        <el-dialog
                title="修改密码"
                :visible.sync="dialogVisibleb"
                width="30%"
                :before-close="handleClose">
            <div class="name-1"><input type="text" placeholder="请输入旧密码！" v-model="oldPwd"></div>
            <div class="name-1" style="margin-top: 20px"><input type="password" placeholder="请输入新密码！" v-model="newPwd"></div>
            <div class="name-1" style="margin-top: 20px"><input type="password" placeholder="请再次输入新密码！" v-model="checkNewPwd"></div>
            <div class="name-1" style="margin-top: 20px"><input type="text" placeholder="请输入手机号！" v-model="mobile"></div>
            <div class="name-2" style="margin-top: 20px"><input type="text" placeholder="请输入验证码！" v-model="pwdCode"></div>
            <div class="right"><button class="code-2" @click="getPwdCodeU" v-bind:disabled="isClickB">{{textB}}</button></div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleb = false">取 消</el-button>
    <el-button type="primary" @click="changePassword">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import topAdv from "../../components/topAdv";
    import footerlist from "../../components/footerModify"
    import {modifyAvatar, modifyName, getCode, modifyPhone, getPwdCode, modifyPwd} from "../../api/person";
    import {viewUserInfo} from "../../api/login";

    export default {
        name: "personalCenter",
        data(){
            return {
                isShow:true,//下拉菜单显示
                tabPosition: 'left',//tabs切换
                dialogVisible: false,//模态框
                dialogVisiblea:false,//第二个模态框
                dialogVisibleb:false,//第三个模态框
                newUserName:'',//修改用户名的输入框
                newPhoneNum:'',//修改手机号的输入框
                newCode:"",//接受修改手机号的验证码
                oldPwd:'',//修改密码的旧密码
                newPwd:'',//修改密码的新密码
                checkNewPwd:'',//修改密码的再次输入新密码
                mobile:'',//修改密码的手机号
                pwdCode:'',//修改密码的验证码
                textA:"获取验证码",//存放第一个获取按钮
                intervalA: null,//第一个定时器
                isClickA:false,//按钮默认不禁用
                numA:60,//点击完等60秒
                textB:"获取验证码",//存放第一个获取按钮
                intervalB:null,//第二个定时器
                isClickB:false,//第二个按钮不禁用
                numB:60,//点击完等60秒
                // word:"秒后重新获取验证码",//点击验证码后多少秒后重新获取验证码

            }
        },
        methods: {
            handleClose(done) {
                done();
            },
            commitFile(){
                console.log(this.$refs.avatar.files)
                modifyAvatar(this.$refs.avatar.files[0]).then(res=>{
                    console.log(res)
                    viewUserInfo().then(res=>{
                        console.log(res)
                        this.$store.commit("modifyLoginType",{isLogin:true,userInfo:res.userInfo})
                    })

                })
            },
            //第一个弹框
            changeName(){
                this.dialogVisible=false
                modifyName(this.newUserName).then(res=>{
                    console.log(res)
                    viewUserInfo().then(res=>{
                        console.log(res)
                        this.$store.commit("modifyLoginType",{isLogin:true,userInfo:res.userInfo})
                    })
                    this.$message({
                        message: '修改姓名成功',
                        type: 'success'
                    });
                })
            },
            //第二个弹框
            // setTimeout(function () {
            //     this.$refs.able.disabled
            // })
            getCodeU(){
                getCode(this.newPhoneNum).then(res=>{
                    console.log(res)
                    if(res.msg=="操作成功") {
                        this.isClickA=true;
                        this.intervalA = setInterval(()=>{
                            this.textA = this.numA+"秒后重新获取验证码";
                            this.numA--;
                            if(this.numA == 0) {
                                clearInterval(this.intervalA)
                                this.textA = "获取验证码";
                                // this.numA = this.textA;
                                this.isClickA = false;
                                this.numA = 60;
                            }
                        },1000)
                    } else {
                        alert("请输入正确的手机号")
                    }

                })
            },
            //修改手机号
            changePhone(){
                this.dialogVisiblea = false;
                modifyPhone(this.newPhoneNum,this.newCode).then(res=>{
                    console.log(res);
                    viewUserInfo().then(res=>{
                        console.log(res)
                        this.$store.commit("modifyLoginType",{isLogin:true,userInfo:res.userInfo})
                    })
                    this.$message({
                        message: '修改手机号成功',
                        type: 'success'
                    });
                })


            },
            //第三个弹框
            getPwdCodeU(){

                getPwdCode(this.mobile).then(res=>{
                    console.log(res)
                    if(res.msg=="操作成功") {
                        this.isClickB=true;
                        this.intervalB = setInterval(()=>{
                            this.textB = this.numB+"秒后重新获取验证码";
                            this.numB--;
                            if(this.text == 0) {
                                clearInterval(this.intervalB)
                                this.textB = "获取验证码";
                                // this.numB = this.textB;
                                this.isClickB = false;
                                this.numB = 60;
                            }
                        },1000)
                    } else {
                        alert("请输入正确的手机号")
                    }
                })
            },
            //修改密码
            changePassword(){
                this.dialogVisibleb = false;
                modifyPwd(this.oldPwd,this.newPwd,this.checkNewPwd,this.mobile,this.pwdCode).then(res=>{
                    console.log(res)
                    viewUserInfo().then(res=>{
                        console.log(res)
                        this.$store.commit("modifyLoginType",{isLogin:true,userInfo:res.userInfo})
                    })
                    this.$message({
                        message: '修改密码成功',
                        type: 'success'
                    });
                })
            },

        },



        components:{
            topAdv,
            footerlist,
        }
    }
</script>

<style scoped lang="less">
    .file {
        opacity: 0;
    }
    .require {
        position: absolute;
        top: 630px;
        left: 110px;
        border: 1px solid #f4f4f4;
        font-size: 14px;
        width: 110px;
        height: 32px;
        text-align: center;
        line-height: 32px;
    }
    /deep/ .el-button:hover {
        color: #23db9b;
        background-color: #fff;
        border-color: #23db9b
    }
    /deep/ .el-button--primary {
        background: #00cf8c;
        border: #00cf8c;
    }
    /deep/ .el-button--primary:hover {
        background: #00cf8c;
        border: #00cf8c;
        color: white;
    }

    //验证码
    .code-1 {
        width: 102px;
        height: 37px;
        text-align: center;
        color: #fff;
        background-color: #00cf8c;
        border: 0px;
    }
    .right {
        position: absolute;
        right: 110px;
        top: 300px;
    }
    .code-2 {
        width:102px;
        height: 37px;
        text-align: center;
        color: #fff;
        background-color: #00cf8c;
        border: 0px;
    }
    //第一个模态框
    .name-1 {
        width: 410px;
        height: 32px;
        border: 1px solid #d9d9d9;
        input {
            padding-left: 5px;
            width: 90%;
            height: 100%;
            outline: 0;
            border: 0;
        }

    }
    .name-1:hover {
        border: 1px solid #00cf8c;
    }
    .name-2 {
        width: 200px;
        height: 32px;
        border: 1px solid #d9d9d9;
        input {
            padding-left: 5px;
            width: 90%;
            height: 100%;
            outline: 0;
            border: 0;
        }

    }
    .name-2:hover {
        border: 1px solid #00cf8c;
    }
    .margin {
        width: 1260px;
        margin: auto;
    }
    .main-box {
        margin: 30px auto!important;
        width: 1200px;
        height: 800px;
        background: #fff;
        /*border: 1px solid red;*/
    }
    .my-home-page {
        /*margin-left: -10px;*/
        /*height: 800px;*/
        width: 1000px;
        /*border: 1px solid black;*/
        h2 {
            margin-top: 10px;
            margin-left: 10px;
            font-weight: normal;
        }

    }
    /deep/
    .el-tabs--left .el-tabs__nav-wrap.is-left::after,
    .el-tabs--left .el-tabs__nav-wrap.is-right::after,
    .el-tabs--right .el-tabs__nav-wrap.is-left::after,
    .el-tabs--right .el-tabs__nav-wrap.is-right::after {
        height: 0px;
    }
 /deep/   .el-tabs__item.is-active {
     color: #00cf8c;
 }
    /deep/ .el-tabs__item:hover {
        color: #00cf8c;
    }
 /deep/   .el-tabs__active-bar {
        background: #00cf8c;
    }
    .ul-list {
        li {
            width: 1000px;
            height: 100px;
            border-bottom: 1px solid #d9d9d9dd;
        }
    }





    .con-main-right{
        float: left;
        padding-left: 24px;
        border: none!important;
    }
    .con-main-right>header{
        font-size: 22px;
    }
    .con-main-right-con{
        width: 970px;
        box-sizing: border-box;
        padding: 40px;
        font-size: 20px;
    }
    .con-main-right-name{
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ddd;
    }
    .con-main-right-name>span,
    .con-main-right-name>p{
        font-size: 20px;
        font-weight: 400;
        color: #333;
    }
    .con-main-right-name>b{
        font-weight: normal;
        font-size: 14px;
        color: #00cf8c;
    }
    .con-main-right-name>p{
        margin-top:5px ;
        line-height: 40px;
    }
    .con-main-right-img>img {
        width: 200px;
        height: 200px;
    }
    .con-main-right-img>span{
        display: inline-block;
        padding: 0 15px;
        line-height: 32px;
        border: 1px solid #ddd;
        color: rgb(165, 164, 164);
        font-size: 14px;
        cursor: pointer;
    }
    .con-main-right-img>span:hover{
        color:#23db9b;
        border-color:#23db9b ;
    }
    b:hover {
        cursor: pointer;
    }
</style>